<template>
  <!--  登录容器-->
  <div class="from-login">
    <div class="slogan">
      <h2>期待你的加入</h2>
      <h2>我有故事你有酒吗</h2>
    </div>
    <div>
      <el-card class="box-card" style="height: 500px">
        <h2 class="login-title">期待你的加入</h2>
        <div class="register" style="display: flex; align-items: center"><span>已有账号？</span>
          <el-link type="primary" style="font-size: 16px" @click="toLogin">立即登录</el-link>
        </div>
        <el-form ref="form"  :model="userInfo" :rules="rules" style="width: 300px">
          <el-form-item prop="username" >
          <el-input prefix-icon="el-icon-user" v-model="userInfo.username" class="User" placeholder="请输入你的用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="userInfo.password" class="User"
                    placeholder="请输入你的密码"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
          <el-input prefix-icon="el-icon-unlock" type="password" v-model="userInfo.checkPass" class="User"
                    placeholder="请确认你的密码" ></el-input>
          </el-form-item>
          <el-button type="primary" class="bt"  @click="register('form')">注册</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Register',
  data() {
    let Pass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.userInfo.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      userInfo: {
        username: '',
        password: '',
        checkPass:''
      },
      rules:{
        username:[
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min:3,max:11,message: '请输入3到10个字符串',trigger: 'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:10,message: '请输入3到10位密码',trigger: 'blur'}
        ],
        checkPass:[
          { validator: Pass, trigger: 'blur' }
        ]
      },
      bgSrc: require("../../public/img/Loginbg.jpg")
    }
  },
  methods:{
    //跳转去登录页
    toLogin(){
      this.$router.push({name:'login'})
    },
    register(formName){
      this.$refs[formName].validate(valib=>{
        if(valib){
          this.$api.userApi.userRegister({username:this.userInfo.username,password:this.userInfo.password}).then(result=>{
            if(result.status===0){
              this.$alert('注册成功是否跳转到登录页', {
                confirmButtonText: '确定',
              }).then(()=>{
                this.$router.push({name:'login'})
              })
            }else {
              this.$message.error(result.message)
              // return new Promise((resolve, reject)=>{})
            }
          })
        }
      })
    }
    }
}
</script>
<style scoped>
.from-login {
  width: 100%;
  height: 100%;
  background: url("~@/../public/img/bg.jpg") no-repeat;
  background-size: cover;
}
.box-card {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  padding: 50px 0 20px 20px;
  position: absolute;
  top: 40%;
  left: 60%;
  transform: translateX(-50%) translateY(-50%);
}
.login-title {
  padding-bottom: 20px;
}
.User {
  margin-top: 20px;
}
.bt {
  width: 100%;
  margin-top: 30px;
  height: 50px;
  font-size: 16px;
}

.slogan {
  position: absolute;
  top: 20%;
  left: 25%;
  font-size: 30px;
  background: linear-gradient(135deg, #f7f7f7, #b9a0a0, #794747, #4e2020, #111111);
  color: transparent;
  -webkit-background-clip: text;
}
</style>